<template>
  <el-dialog v-model="showUploadDialog" title="视频上传">
    <el-select v-model="selectedAnime" filterable remote :remote-method="searchAnime" placeholder="输入番剧名称">
      <el-option v-for="item in animeOptions" :key="item.videoId" :label="item.title" :value="item.videoId" />
    </el-select>
    <div  style="margin: 15px 0;"><span>当前：上传的集数</span><el-input-number style="margin-left: 15px" v-model="episodeNumber" :min="1" :max="200"/></div>
    <el-upload class="upload-area" drag multiple
               v-if="uploadPercentage === 0"
               :file-list="fileList"
               :http-request="handleUpload"
               :on-progress="handleProgress">
      <el-icon><Upload /></el-icon>
      <div>将视频拖到此处或<em>点击选择</em></div>
    </el-upload>
    <el-progress v-if="uploadPercentage > 0" :percentage="uploadPercentage" :status="uploadStatus" />
    <el-button type="primary" :disabled="!canSubmit" @click="submitForm">确认提交</el-button>
  </el-dialog>
</template>
<script setup>
  import { ref } from 'vue'
  import { ElMessage } from 'element-plus'
  import {preUploadVideo, uploadVideo} from "@/api/file.js";
  import {addVideoFile} from "@/api/video.js";

  const props = defineProps({
    animeOptions: Array, // 番剧选项列表
    canSubmit: Boolean, // 是否可以提交
    searchAnime: Function // 番剧搜索方法
  })

  const showUploadDialog = ref(false) // 控制对话框显示
  const fileList = ref([]) // 文件列表
  const selectedAnime = ref('') // 选中的番剧ID
  const uploadPercentage = ref(0) // 上传进度百分比
  const uploadStatus = ref('') // 上传状态
  const canSubmit = ref(false) // 是否可以提交
  const uploadId = ref() // 上传ID
  const episodeNumber = ref(1) // 选择的视频集数

  //关闭事件
  const closeDialog = () => {
    fileList.value = []
    selectedAnime.value = ''
    uploadStatus.value = ''
    canSubmit.value = false
    uploadId.value = ''
    episodeNumber.value = 1
    uploadPercentage.value = 0
    showUploadDialog.value = false
  }
  //打开对话框
  const openDialog = () => {
    showUploadDialog.value = true
  }

  // 分片上传逻辑
  const handleUpload = async (options) => {
    const file = options.file
    const chunkSize = 5 * 1024 * 1024 // 5MB分片
    const chunks = Math.ceil(file.size / chunkSize)
    try {
      // 1. 预上传获取uploadId
      const preRes = await preUploadVideo({ chunks: chunks, fileName: file.name })
      uploadId.value = preRes.data.data
      uploadPercentage.value = 1
      uploadStatus.value = '上传中'
      // 2. 分片上传
      for (let i = 0; i < chunks; i++) {
        const start = i * chunkSize
        const end = Math.min(file.size, start + chunkSize)
        const chunk = file.slice(start, end)
       await uploadVideo({ uploadId: uploadId.value, chunkNumber: i + 1, chunkData: chunk })
        // 更新进度
        uploadPercentage.value = Math.round(((i + 1) / chunks) * 100)
      }
      // 3. 记录上传完成文件
      fileList.value.push({ name: file.name, status: 'success', uploadId: uploadId.value })
      uploadStatus.value = 'success'
      canSubmit.value = true
    } catch (e) {
      uploadStatus.value = 'exception'
      ElMessage.error('上传失败')
    }
  }

  // 上传进度处理
  const handleProgress = (event, file) => {
    // 实时更新进度显示
    uploadPercentage.value = Math.round((event.loaded / event.total) * 100)
  }

  // 表单提交
  const submitForm = async () => {
    const videoList = fileList.value.map(f => ({ uploadId: f.uploadId, fileName: f.name }))
     await addVideoFile({ videoId: selectedAnime.value,episodeNumber: episodeNumber.value, videoList: JSON.stringify(videoList) })
    ElMessage.success('提交成功')
    closeDialog()
  }
  defineExpose({
    openDialog,
    closeDialog
  })
</script>
<style scoped>

</style>